<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <div class="icon-container">
                <el-icon @click="collapseMenu" class="icon" size="20">
                    <Fold />
                </el-icon>
            </div>

            <ul class="flex-box" style="height: 50px;line-height: 50px;
">
                <li v-for="(item, index) in selectMenu" :class="{ selected: route.path === item.meta.path }"
                    :key="item.path" class="tab flex-box">
                    <el-icon class='tab-icon' size="15">
                        <component :is="item.meta.icon" />
                    </el-icon>
                    <router-link :to="{ path: item.meta.path }">
                        {{ item.meta.name }}
                    </router-link>
                    <el-icon @click="removeTab(item , index)" class="tab-close" size="15">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <!-- {{ userInfo }} -->
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-avatar :src="userstore.avatar" />
                    <p class="user-name">
                        {{ username }}
                    </p>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '../store/modules/user.js'
import { useMenuStore } from '../store/modules/menu.js'
import { computed } from 'vue'
import { useRoute , useRouter } from 'vue-router'

//实例化store
const userstore = useUserStore()
const menustore = useMenuStore()
const username = userstore.name
const route = useRoute()
const router = useRouter()
const selectMenu = computed(() => menustore.selectMenu)

// console.log(selectMenu)
const errorHandler = () => {
    // 当头像加载失败时的处理逻辑
    console.log('头像加载失败')
    return true
}
//触发菜单收缩
const collapseMenu = () => {
    menustore.collapseMenu()
}

//点击关闭tab
const removeTab = (item ,index) =>{
    console.log(item ,'item');
    
    menustore.removeTab(item)
    // 删除非当前页的tab
    if(route.path !== item.meta.path){
        return
    }
    const selectMenuData = selectMenu.value
    //删除最后一项
    if(index === selectMenuData.length){
        //如果tab只有一个元素
        if(!selectMenuData.length){
            router.push('/')
        }else{
            router.push({
                path:selectMenuData[index -1 ].meta.path
            })
        }
    } else{ //如果删除的是中间位置的tab
        router.push({
            path:selectMenuData[index].meta.path
        })
         
    }
}


</script>


<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    height: 100%;

    .header-left {
        height: 100%;

        .icon-container {
            height: 100%;
            margin-right: 20px;

            &:hover {
                background-color: darken(#f5f5f5, 5%);
                cursor: pointer;
            }

            .el-icon {
                font-size: 24px;

                width: 45px;
                height: 100%;
                display: flex;
                align-items: center;
            }
        }

        .tab {
            height: 100%;
            padding: 0 10px;

            &:hover {
                background-color: #f5f5f5;

                .tab-close {
                    visibility: visible;
                }
            }

            &.selected {
                a {
                    color: #409ef5;
                }

                i {
                    color: #409ef5;
                }

                background-color: #f5f5f5;

            }

            .tab-icon {
                margin-right: 5px;
                margin-top: 2px;

            }

            .tab-close {
                visibility: hidden;
                margin-left: 5px;
                cursor: pointer;
                margin-top: 2px;

            }

            a {
                height: 100%;
                color: #333;
                font-size: 16px;
            }
        }

    }


}

.el-dropdown-link {
    width: 120px;
    display: flex;
    align-items: center;
}

.user-name {
    margin-left: 10px;
}
</style>